
<template>
    <rx-layout>
        <div slot="header" style="text-align:right;">
            <a-button @click="saveConfig" icon="save" type="primary">{{$ti18('rxForm.saveBtn','保存')}}</a-button>
        </div>
        <div slot="center">
            <a-collapse v-model="collapseKey">
                <a-collapse-panel key="1" :header="i18n('webForm.baseConf','基础配置')">
                    <a-form-model ref="form" :model="mdl" :label-col="labelCol1" :wrapper-col="wrapperCol">

                        <a-row :span="24">
                            <a-col :span="12">
                                <a-form-model-item :label="i18n('webForm.title','首页标题')">
                                    <rx-input-i18n :placeholder="i18n('webForm.title','首页标题','input')"
                                                   v-model="homePageTitle" @change="changeValue('homePageTitle')"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item :label="i18n('webForm.supportGrade','启用分公司')">
                                    <a-checkbox v-model="supportGrade" @change="changeValue('supportGrade')"></a-checkbox>
                                </a-form-model-item>
                            </a-col>
                        </a-row>

                        <a-row :span="24">
                            <a-col :span="12">
                                <a-form-model-item :label="i18n('webForm.colorLogo','首页彩色logo')" style="margin-top: 10px">
                                    <div class="uploadBox">
                                        <a-upload
                                            name="files"
                                            listType="picture-card"
                                            class="avatar-uploader"
                                            :showUploadList="false"
                                            action="/api/api-system/system/core/sysFile/upload"
                                            :headers="headers"
                                            :beforeUpload="beforeUpload"
                                            @change="handleHomePageLogo"
                                            style="width: 100%;height: 100%;"
                                        >
                                            <div v-if="homePageLogoUrl" class="upload-del" @click.stop="imgDel('homePageLogo')"><a-icon type="close-circle" /></div>
                                            <img v-if="homePageLogoUrl" :src="homePageLogoUrl" alt="photo" class="userHeadPortrait" style="max-width: 100%;object-fit: cover" />
                                            <div v-else>
                                                <a-icon :type="homePageLogoLoading ? 'loading' : 'plus'" />
                                            </div>
                                        </a-upload>
                                    </div>
                                    <span class="avatar-uploader-span">{{i18n('argsForm.sizeTips','建议上传50*50')}}</span>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item :label="i18n('webForm.whiteLogo','首页白色logo')" style="margin-top: 10px">
                                    <div class="uploadBox">
                                        <a-upload
                                            name="files"
                                            listType="picture-card"
                                            class="avatar-uploader"
                                            :showUploadList="false"
                                            action="/api/api-system/system/core/sysFile/upload"
                                            :headers="headers"
                                            :beforeUpload="beforeUpload"
                                            @change="handleHomePageLucentLogo"
                                            style="width: 100%;height: 100%;"
                                        >
                                            <div v-if="homePageLucentLogoUrl" class="upload-del" @click.stop="imgDel('homePageLucentLogo')"><a-icon type="close-circle" /></div>
                                            <img v-if="homePageLucentLogoUrl" :src="homePageLucentLogoUrl" alt="photo" class="userHeadPortrait" style="max-width: 100%;object-fit: cover" />
                                            <div v-else>
                                                <a-icon :type="homePageLucentLogoLoading ? 'loading' : 'plus'" />
                                            </div>
                                        </a-upload>
                                    </div>
                                    <span class="avatar-uploader-span">{{i18n('argsForm.sizeTips','建议上传50*50')}}</span>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row :span="24">
                            <a-col :span="12">
                                <a-form-model-item :label="i18n('argsForm.linkLogoLabel','浏览器标签页图标')" style="margin-top: 10px">
                                    <div class="uploadBox">
                                        <a-upload
                                            name="files"
                                            listType="picture-card"
                                            class="avatar-uploader"
                                            :showUploadList="false"
                                            action="/api/api-system/system/core/sysFile/upload"
                                            :headers="headers"
                                            :beforeUpload="beforeUpload"
                                            @change="linkLogo"
                                            style="width: 100%;height: 100%;"
                                        >
                                            <div v-if="linkLogoUrl" class="upload-del" @click.stop="imgDel('linkLogoUrl')"><a-icon type="close-circle" /></div>
                                            <img v-if="linkLogoUrl" :src="linkLogoUrl" alt="photo" class="userHeadPortrait" style="max-width: 100%;object-fit: cover" />
                                            <div v-else>
                                                <a-icon :type="linkLogoUrlLoading ? 'loading' : 'plus'" />
                                            </div>
                                        </a-upload>
                                    </div>
                                    <span class="avatar-uploader-span">{{i18n('argsForm.linkLogoSuggestion','建议上传24*24的ico图标，上传的图标显示在浏览器标签页')}}</span>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item :label="i18n('argsForm.syncorgType','同步组织架构方式')" style="margin-top: 10px">

                                    <div style="display: flex">
                                        <div style="flex: 1;margin-right: 10px">
                                            <a-radio-group :options="syncorgOptions" v-model="syncorgType" @change="changeValue('syncorgType')"/>
                                            <a-tooltip>
                                                <template slot="title"><span>
                                                    <a :href="baseUrl+'/org/home/platformsAdc'">{{i18n('argsForm.syncorgTypeTip','开启后可前往组织中心-组织架构集成使用')}}</a>
                                                </span></template>
                                                <a-icon type="question-circle-o" />
                                            </a-tooltip>
                                        </div>
                                    </div>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </a-form-model>
                </a-collapse-panel>
                <a-collapse-panel key="2" :header="i18n('webForm.mapConfig','地图配置')">
                    <a-form>
                        <a-row :span="24">
                            <a-col :span="12">
                                <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol" :label="i18n('webForm.baiduKey','百度Key')">
                                   <div style="display: flex;align-items: center">
                                       <div style="flex: 1;margin-right: 10px"><a-input v-model="mapConfig.baidu.ak"/></div>
                                       <a-tooltip>
                                           <template slot="title">
                                               {{i18n('webForm.documentation','详细文档')}}：
                                               <a href="https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey" target="_blank">
                                                   https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey
                                               </a>
                                           </template>
                                           <a-icon type="question-circle-o"/>
                                       </a-tooltip>
                                   </div>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol" :label="i18n('webForm.amapAk','高德Key')">
                                    <div  style="display: flex;align-items: center">
                                        <div style="flex: 1;margin-right: 10px"><a-input v-model="mapConfig.amap.ak"/></div>
                                        <a-tooltip>
                                            <template slot="title">
                                                {{i18n('webForm.documentation','详细文档')}}：
                                                <a href="https://lbs.amap.com/api/javascript-api-v2/guide/abc/load" target="_blank">
                                                    https://lbs.amap.com/api/javascript-api-v2/guide/abc/load
                                                </a>
                                            </template>
                                            <a-icon type="question-circle-o"/>
                                        </a-tooltip>
                                    </div>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :span="24">
                            <a-col :span="12">
                                <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol" :label="i18n('webForm.amapSecretKey','高德密钥')">
                                    <a-input v-model="mapConfig.amap.secretKey"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-collapse-panel>
            </a-collapse>

        </div>
    </rx-layout>
</template>
<script>
    import SysSiteSettingApi from '@/api/system/core/sysSiteSetting';
    import { RxDialog, BaseFormModel,Util,RxInputI18n ,TokenUtil} from "@lowcode/jpaas-common-lib";
    import userState from "@/assets/js/userState";
    export default {
        name: 'SysSiteSettingEdit',
        props:['siteSettingJson'],
        mixins: [BaseFormModel,userState],
        components: {
            RxDialog,RxInputI18n
        },

        data() {
            return {
                baseUrl : process.env.VUE_APP_ADMIN_FRONT,
                labelCol1: {span: 8},
                wrapperCol: {span: 12},
                headers:{},
                homePageTitle: '',
                homePageLogo: '',
                homePageLogoUrl: '',
                homePageLogoLoading:false,
                homePageLucentLogo: '',
                homePageLucentLogoUrl: '',
                linkLogoUrl:'',
                homePageLucentLogoLoading:false,
                linkLogoUrlLoading:false,
                supportGrade :false,
                syncorgType:"",
                syncorgOptions:[
                    {label: this.i18n('argsForm.WeChat','微信'), value: 'WeChat'},
                    {label: this.i18n('argsForm.dingding','钉钉'), value: 'dingding'},
                   /* {label: this.i18n('argsForm.feishu','飞书'), value: 'feishu'},*/
                ],
                confsJson:{},
                collapseKey:"1",
                mapConfig:{
                    //百度
                    baidu:{
                        ak:""
                    },
                    //高德
                    amap:{
                        ak:"",
                        secretKey:"",
                    },
                },
            }
        },
        created() {
            var token =TokenUtil.getToken();
            if (token) {
                this.headers['Authorization'] = 'Bearer ' + token // 让每个请求携带token--['Authorization']为自定义key 请根据实际情况自行修改
            }
            this.initConfig()
        },
        methods: {
            i18n(name,text,key){
                return this.$ti18(name,text,"SysConfig",key);
            },
            imgDel(type){
                if(type=='homePageLucentLogo'){
                    this.homePageLucentLogo ='';
                    this.homePageLucentLogoUrl ='';
                }else {
                    this.homePageLogoUrl = '';
                    this.homePageLogo = '';
                    this.linkLogoUrl = ''
                }
                this.changeValue(type);
            },
            getFilePath(fileId){
                let token = TokenUtil.getToken();
                fileId=Util.encryptWord(fileId);
                return "/api/api-system/system/core/sysFile/previewFile?fileId=" + fileId + "&accessToken=" + token;
            },
            beforeUpload(file) {
                const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
                if (!isJpgOrPng) {
                    this.$message.error(this.i18n('msa.jpgType','只能上传图片!'));
                }
                const isLt50KB = file.size / 1024  < 50;
                if (!isLt50KB) {
                    this.$message.error(this.i18n('msa.jpgSize','图片必须小于50KB!'));
                }
                return isJpgOrPng && isLt50KB;
            },
            handleChange(info, type) {
                if (info.file.status === 'uploading') {
                    this[type + 'loading'] = true;
                    return;
                }
                if (info.file.status === 'done') {
                    var res=info.fileList[info.fileList.length - 1].response;
                    if(res.success){
                        this[type]=res.data[0].fileId;
                        this[type + 'Url']=this.getFilePath(res.data[0].fileId);
                        this[type + 'loading']=false;
                    }
                }
                this.changeValue(type);
            },
            handleHomePageLogo(info) {
                this.handleChange(info, 'homePageLogo');
            },
            handleHomePageLucentLogo(info) {
                this.handleChange(info, 'homePageLucentLogo');
            },
            linkLogo(info){
                this.handleChange(info, 'linkLogoUrl');
            },
            changeValue(key){
                this.confsJson[key]=this[key];
                this.$set(this.mdl,"confs",JSON.stringify(this.confsJson))
                this.$emit("updateSitetting",this.mdl);

            },
            initConfig() {
                this.mdl = this.siteSettingJson;
                if(!this.mdl.confs){
                    return;
                }
                this.confsJson = JSON.parse(this.mdl.confs);
                this.homePageTitle = this.confsJson.homePageTitle;
                this.supportGrade=this.confsJson.supportGrade || false;

                if(this.confsJson.homePageLogo) {
                    this.homePageLogo = this.confsJson.homePageLogo;
                    this.homePageLogoUrl = this.getFilePath(this.confsJson.homePageLogo);
                }
                if(this.confsJson.syncorgType) {
                    this.syncorgType = this.confsJson.syncorgType;
                }


                if(this.confsJson.homePageLucentLogo) {
                    this.homePageLucentLogo = this.confsJson.homePageLucentLogo;
                    this.homePageLucentLogoUrl = this.getFilePath(this.confsJson.homePageLucentLogo);
                }
                if(this.confsJson.linkLogoUrl){
                    this.linkLogoUrl = this.getFilePath(this.confsJson.linkLogoUrl)
                }
                if(this.confsJson.mapConfig){
                    this.mapConfig = this.confsJson.mapConfig
                }
            },
            saveConfig() {
                this.$emit("saveProps");
            },
        },
        watch: {
            siteSettingJson:{
                handler(newValue, oldValue) {
                    this.initConfig();
                },
                deep: true
            },
            mapConfig:{
                handler(value) {
                    this.confsJson.mapConfig = value;
                    this.$set(this.mdl,"confs",JSON.stringify(this.confsJson))
                    this.$emit("updateSitetting",this.mdl);
                },
                deep: true
            }
        }
    }
</script>
<style lang="less">
    .relick a {
       margin-right: 10px;
    }

    .avatar-uploader{
        position: relative;
        width: 70px!important;
        height: 70px!important;
        .ant-upload.ant-upload-select-picture-card{
            height: 70px!important;
            width: 70px!important;
        }
        .ant-upload.ant-upload-select-picture-card > .ant-upload{
            padding: 5px!important;
            border-radius: 5px;
        }
    }
    .avatar-uploader-span{
        display: block;
        font-family: MicrosoftYaHei;
        font-size: 12px;
        line-height: 1px;
        font-weight: normal;
        margin-bottom: 25px;
        color: #c7c7c7;
    }
    .upload-del{
        display: none;
        position: absolute;
        right: 2px;
        top: 0;
        font-size: 14px;
        line-height: normal;
        cursor: pointer;
        z-index: 9;
    }
    .upload-del:hover{
        color: red;
    }
    .avatar-uploader:hover .upload-del{
        display: block;
    }
</style>
